<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
							:merchantInfo.sync="merchantObj"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.proxy_transfer_time'
							)}:`
						"
						label-width="77px"
					>
						<el-date-picker
							v-model="searchTime"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							:clearable="false"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.order_no')}:`"
						label-width="61px"
					>
						<el-input
							v-model="queryData.orderNo"
							clearable
							size="medium"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							v-symbols
							oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.proxy_name')}:`"
						label-width="77px"
					>
						<el-input
							v-model="queryData.proxyName"
							clearable
							size="medium"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							v-symbols
							oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.order_status'
							)}:`
						"
						label-width="77px"
					>
						<el-select
							v-model="queryData.orderStatus"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								:label="
									$t(
										'funds.proxy_member_funds_record.order_status_success'
									)
								"
								value="1"
							></el-option>
							<el-option
								:label="
									$t(
										'funds.proxy_member_funds_record.order_status_fail'
									)
								"
								value="2"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.proxy_transfer_amount'
							)}:`
						"
						label-width="77px"
					>
						<el-input
							v-model="queryData.amountMin"
							size="medium"
							clearable
							:placeholder="$t('common.minimum')"
							style="width: 130px"
							maxLength="15"
							v-input="{ name: 'intp' }"
							name="amountMin"
							@blur="
								handleAmount(
									queryData,
									1,
									'amountMin',
									'amountMax',
									$t(
										'funds.proxy_member_funds_record.form_search_tip11'
									)
								)
							"
						></el-input>
						-
						<el-input
							v-model="queryData.amountMax"
							size="medium"
							clearable
							:placeholder="$t('common.maximum')"
							style="width: 130px"
							maxLength="15"
							v-input="{ name: 'intp' }"
							name="amountMax"
							@blur="
								handleAmount(
									queryData,
									2,
									'amountMin',
									'amountMax',
									$t(
										'funds.proxy_member_funds_record.form_search_tip12'
									)
								)
							"
						></el-input>
					</el-form-item>

					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('405061')"
							icon="el-icon-download"
							type="warning"
							:disabled="loading"
							size="medium"
							@click="handleExportExcel"
						>
							{{ $t('common.export') }}
						</el-button>
						<el-button
							type="success"
							icon="el-icon-sort"
							:disabled="loading"
							size="medium"
							@click="openColSettings"
						>
							{{ $t('common.row_set') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					ref="tables"
					v-loading="loading"
					border
					size="mini"
					show-summary
					:data="tableData"
					style="width: 100%"
					class="small-size-table"
					:header-cell-style="getRowClass"
					element-loading-spinner="el-icon-loading"
					highlight-current-row
					:summary-method="(val) => handleRow(val, subSummary)"
				>
					<el-table-column
						prop="orderNo"
						align="center"
						:label="$t('funds.order_no')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy :title="scope.row.orderNo" :copy="copy">
								{{ scope.row.orderNo }}
							</Copy>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[$t('funds.proxy_name')]"
						prop="proxyName"
						align="center"
						:label="$t('funds.proxy_name')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy :title="scope.row.proxyName" :copy="copy">
								{{ scope.row.proxyName }}
							</Copy>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[$t('common.belong_merchant')]"
						prop="merchantName"
						align="center"
						:label="$t('common.belong_merchant')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.merchantName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t(
									'funds.proxy_member_funds_record.order_status'
								)
							]
						"
						prop="orderStatus"
						align="center"
						:label="
							$t('funds.proxy_member_funds_record.order_status')
						"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{
								scope.row.orderStatus === 1
									? $t(
											'funds.proxy_member_funds_record.order_status_success'
									  )
									: $t(
											'funds.proxy_member_funds_record.order_status_fail'
									  )
							}}
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t(
									'funds.proxy_member_funds_record.proxy_transfer_amount'
								)
							]
						"
						prop="amount"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.proxy_transfer_amount'
							)
						"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.amount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t(
									'funds.proxy_member_funds_record.proxy_transfer_time'
								)
							]
						"
						prop="createdTime"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.proxy_transfer_time'
							)
						"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.createdTime || '-' }}
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
		</div>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
const end = dayjs().endOf('day')
const start = dayjs().startOf('day')
export default {
	name: routerNames.transferRecord,
	mixins: [list, summaryList],
	data() {
		return {
			queryData: {
				amountMin: undefined,
				amountMax: undefined
			},
			searchTime: [start, end],
			tableData: [],
			accountBizDicList: [],
			accountChangeDic: [],
			subSummary: {},
			merchantObj: '',
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			activityListField: {
				// 代理账号: true,
				// 所属商户: true,
				// 订单状态: true,
				// 转回金额: true,
				// 转回时间: true
				[this.$t('funds.proxy_name')]: true,
				[this.$t('common.belong_merchant')]: true,
				[this.$t('funds.proxy_member_funds_record.order_status')]: true,
				[this.$t(
					'funds.proxy_member_funds_record.proxy_transfer_amount'
				)]: true,
				[this.$t(
					'funds.proxy_member_funds_record.proxy_transfer_time'
				)]: true
			}
		}
	},
	computed: {},
	created() {
		this.initIndexDB('transferRecord', this.activityListField)
	},
	methods: {
		loadData() {
			this.loading = true
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				createdTimeStart: dayjs(timeArr[0]).format(
					'YYYY-MM-DD HH:mm:ss'
				),
				createdTimeEnd: dayjs(timeArr[1]).format('YYYY-MM-DD HH:mm:ss'),
				...this.getParams(params)
			}
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getProxyFundsRecordsTransferList(params)
				.then((res) => {
					this.loading = false
					const { record, totalRecord, summary } = res.data || {}
					this.tableData = record || []
					this.total = totalRecord
					this.subSummary = summary || {}
				})
				.catch(() => {
					this.loading = false
				})
		},

		reset() {
			this.queryData = {
				amountMin: undefined,
				amountMax: undefined
			}
			this.merchantObj = ''
			this.searchTime = [start, end]
			this.pageNum = 1
			this.loadData()
		},
		handleExportExcel() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				createdTimeStart: dayjs(timeArr[0]).format(
					'YYYY-MM-DD HH:mm:ss'
				),
				createdTimeEnd: dayjs(timeArr[1]).format('YYYY-MM-DD HH:mm:ss')
			}
			this.exportExcelPublic({
				api: 'getProxyFundsRecordsTransferExport',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			this.updateIndexDB()
		},
		// 打开列设置弹框
		openColSettings() {
			this.getIndexDB(this.activityListField)
			this.colSettings.visible = true
		},
		clickDel() {
			this.dialogColumnData = {}
			this.dialogColumnData = {
				// 代理账号: true,
				// 所属商户: true,
				// 订单状态: true,
				// 转回金额: true,
				// 转回时间: true
				[this.$t('funds.proxy_name')]: true,
				[this.$t('common.belong_merchant')]: true,
				[this.$t('funds.proxy_member_funds_record.order_status')]: true,
				[this.$t(
					'funds.proxy_member_funds_record.proxy_transfer_amount'
				)]: true,
				[this.$t(
					'funds.proxy_member_funds_record.proxy_transfer_time'
				)]: true
			}
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
